<body>

  <div class="tableStyle">
    <div id="container">
      <div class="col-sm-10 col-sm-offset-1" style="margin-left: 0px;padding-left: 0px;">
        <div class="card wizard-card">
          <!--标头-->
          <div class="wizard-header">
            <h3>
              <b></b> 个人信息
              <br>
            </h3>
          </div>

          <div class="modal-body">
            <form role="form" class="form-horizontal" #validationForm1="ngForm">
              <div class="col-sm-4 col-sm-offset-1">
                <div class="form-group">
                  <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名：</label>
                  <label>
                    <input type="text" class="form-control div-width" [(ngModel)]="personInfo.name" placeholder="请输入姓名" name="name" ngModel #name="ngModel"
                      onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                      oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" required>

                    <p [hidden]="name.valid||name.pristine">必填项</p>
                  </label>
                </div>
                <!-- <div class="form-group ele-hidden">
                  <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出生年月：</label>
                  <label>
                    <p-calendar [(ngModel)]="personInfo.birthday" dateFormat="yy-mm-dd" [showIcon]="true" [locale]="ch"> </p-calendar>
                  </label>
                </div> -->
                <div class="form-group">
                  <label for="phone">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;常用电话：</label>
                  <label>
                    <input type="text" class="form-control div-width" [(ngModel)]="personInfo.phone" placeholder="请输入电话" name="phone" ngModel
                      #phone="ngModel" phone="CN" minlength="11" maxlength="11" onkeyup="value=value.replace(/[^0-9]/g,'')"
                      onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu="value=value.replace(/[^0-9]/g,'')" required>

                    <p [hidden]="phone.valid||phone.pristine">不是合法的电话号码</p>
                  </label>
                </div>

                <!-- <div class="form-group ele-hidden">
                  <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信号：</label>
                  <label>
                    <input type="text" class="form-control" [(ngModel)]="personInfo.wechat" placeholder="请输入微信号" name="wechat" required>
                  </label>
                </div> -->
                <div class="form-group  form-inline">
                  <label>进入提高班时间：</label>
                  <label>
                    <div class="input-group" style="width : 182px">
                      <p-calendar [(ngModel)]="personInfo.enterDmtTime" dateFormat="yy-mm-dd" name="enterDmtTime" [showIcon]="true" [locale]="ch"></p-calendar>
                    </div>
                  </label>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="form-group">
                  <!-- <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;英文名：</label> -->
                  <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期数：</label>

                  <label>
                    <select class="form-control select-Width" [(ngModel)]="personInfo.grade" name="grade" ngModel #grade="ngModel" required>
                      <option *ngFor="let option of gradeOptions" [value]="option.id">{{option.dictName}}</option>
                    </select>
                  </label>
                </div>
                <div class="form-group" style="height:42px">
                  <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：</label>
                  <label>
                    <input type="radio" style="width:50px" [(ngModel)]="personInfo.sex" name="sex" value="男">男
                    <input type="radio" style="width:50px" [(ngModel)]="personInfo.sex" name="sex" value="女">女
                  </label>
                </div>
                <!-- <div class="form-group ele-hidden">
                  <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱：</label>
                  <label>
                    <input type="text" class="form-control" [(ngModel)]="personInfo.email" placeholder="请输入邮箱" name="email" ngModel #appEmail="ngModel"
                      email required>
                    <p [hidden]="appEmail.valid||appEmail.pristine">不是正确的邮箱地址</p>
                  </label>
                </div> -->

                <!-- <div class="form-group ele-hidden">
                  <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;QQ号：</label>
                  <label>
                    <input type="text" class="form-control" [(ngModel)]="personInfo.qq" placeholder="请输入QQ号" name="qq" required>
                  </label>
                </div> -->
                <div class="form-group form-inline">
                  <label>提高班毕业时间：</label>
                  <label>
                    <div class="input-group" style="width : 182px">
                      <p-calendar [(ngModel)]="personInfo.graduateDmtTime" dateFormat="yy-mm-dd" name="graduateDmtTime" value="#{calendarView.date1}" [showIcon]="true"
                        [locale]="ch"></p-calendar>
                    </div>
                  </label>
                </div>

              </div>
              <div class="col-sm-2 form-group">
                <div class="picture-container">
                  <div class="picture">
                    <img src="{{defaultPicture}}" class="picture-src" id="wizardPicturePreview" title="" />
                    <input type="file" id="wizard-picture" class="showPicture" name="picture" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged()">
                  </div>
                  <!-- <h6>修改图片</h6> -->
                  <!-- <label (click)="updatePicture()">{{editPicture ? '修改' : '确认上传'}}</label> -->
                </div>
                <div class="form-group">
                  <!-- <label>擅长领域或个人简介</label> -->
                  <label>
                    <!-- <input type="text" class="form-control" [(ngModel)]="personInfo.professionalField" placeholder="擅长领域或个人简介" name="profile" required> -->
                    <!-- <p contenteditable="true" [(ngModel)]="personInfo.professionalField" placeholder="擅长领域或个人简介" class="form-p" >{{personInfo.professionalField}}</p> -->
                  </label>

                </div>
              </div>
              <div class="col-sm-12  col-sm-offset-1">
                <div class="form-group">
                  <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;现住所地址：</label>
                  <label class="form-inline">

                    <!-- <select class="form-control" [(ngModel)]="personInfo.provinceId" (change)="changeProvince($event.target.value)" style="float:left"
              name="province">
              <option *ngFor="let option of provinceOptions" [value]="option.id">{{option.name}}</option>
            </select>

            <select class="form-control" [(ngModel)]="personInfo.cityId" (change)="changeCity($event.target.value)" style="float:left"
              name="city">
              <option *ngFor="let option of cityOptions" [value]="option.id">{{option.name}}</option>
            </select>
            <select class="form-control" [(ngModel)]="personInfo.countyOrDistrictId" (change)="changeCountyOrDistrict($event.target.value)"
              style="float:left" name="countyOrDistrict">
              <option *ngFor="let option of countyOrDistrictOptions" [value]="option.id">{{option.name}}</option>
            </select> -->
                    <input type="text" class="form-control" style="width: 552px;" [(ngModel)]="personInfo.address" placeholder="请输入详细地址" name="address"
                      ngModel #address="ngModel" required>
                  </label>
                </div>
              </div>
              <div class="col-sm-12  col-sm-offset-1">
                <div class="form-group ">
                  <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍贯：</label>
                  <label class="form-inline">
                    <!-- <select class="form-control" style="float:left" [(ngModel)]="personInfo.provinceNativeId" (change)="changeNativeProvince($event.target.value)"
              name="province">
              <option *ngFor="let option of provinceNativeOptions" [value]="option.id">{{option.name}}</option>
            </select>
            <select class="form-control" style="float:left" [(ngModel)]="personInfo.cityNativeId" (change)="changeNativeCity($event.target.value)"
              name="city">
              <option *ngFor="let option of cityNativeOptions" [value]="option.id">{{option.name}}</option>
            </select>
            <select class="form-control" [(ngModel)]="personInfo.countyOrDistrictNativeId" style="float:left" name="countyOrDistrict">
              <option *ngFor="let option of countyOrDistrictNativeOptions" [value]="option.id">{{option.name}}</option>
            </select> -->
                    <input type="text" class="form-control" style="width: 552px;" [(ngModel)]="personInfo.nativePlace" placeholder="请输入详细地址"
                      name="nativePlace" ngModel #nativePlace="ngModel" required>
                  </label>
                </div>
              </div>
              <div class="col-sm-4 col-sm-offset-1">
                <div class="form-group">
                  <label>紧急联系人姓名：</label>
                  <label>
                    <input type="text" class="form-control div-width" [(ngModel)]="personInfo.emergName" placeholder="请输入姓名" ngModel #emergName="ngModel"
                      name="emergName" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                      oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" required>

                    <p [hidden]="emergName.valid||emergName.pristine">请输入紧急联系人姓名</p>
                  </label>
                </div>
                <div class="form-group">
                  <label>紧急联系人电话：</label>
                  <label>
                    <input type="text" class="form-control div-width" [(ngModel)]="personInfo.emergPhone" placeholder="请输入电话" name="emergPhone"
                      ngModel #emergPhone="ngModel" phone="CN" minlength="11" maxlength="11" onkeyup="value=value.replace(/[^0-9]/g,'')" required>
                    <p [hidden]="emergPhone.valid||emergPhone.pristine">不是合法的电话号码</p>
                  </label>
                </div>

              </div>
              <div class="col-sm-4">

                <div class="form-group">
                  <label>&nbsp;&nbsp;&nbsp;&nbsp;与自己的关系：</label>
                  <label class="form-inline">
                    <!-- <input type="text" class="form-control" [(ngModel)]="personInfo.emergRelation" placeholder="请输入与自己的关系" name="emergRelation" required> -->
                    <select class="form-control select-Width" [(ngModel)]="personInfo.emergRelation" name="emergRelation" ngModel #emergRelation="ngModel"
                      required>
                      <option *ngFor="let option of relationOptions" [value]="option.id">{{option.dictName}}</option>
                    </select>
                    <p [hidden]="emergRelation.valid||emergRelation.pristine">必填项</p>
                  </label>
                </div>
                <div class="form-group">
                  <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备注：</label>
                  <label>
                    <input type="text" style="width: 195px" [(ngModel)]="personInfo.remark" class="form-control" placeholder="" name="remark">
                  </label>

                </div>
              </div>
            </form>
          </div>
          <div class="col-sm-2">
            <label class="ele-placeHolder">
              <!-- 占位 -->
            </label>
            <label class="col-sm-offset-5">
              <button type="submit" style="width : 100px" class="btn btn-primary" [disabled]="!validationForm1.form.valid" (click)="doAdd()">
                保存
              </button>
            </label>
          </div>

        </div>
      </div>

      <!-- 提示框，隐藏IP地址 -->
      <p-dialog header="提示" [(visible)]="display" modal="modal" width="400" [responsive]="true">
        <p style="text-align:center">
          {{messages}}
        </p>

        <p-footer>
          <button type="button" pButton icon="fa-check" (click)="display=false" label="确定"></button>
        </p-footer>
      </p-dialog>
    </div>
  </div>
</body>